<template>
  <div class="data_container">
    <div class="data_content_up_container">
      <div class="data_content_upleft_container">
        <div class="data_content_upcenter_table_container">
          <div id="table1" class="data_content_upleft_table"></div>
        </div>
      </div>
      <div class="data_content_upcenter_container">
        <div id="map" class="data_content_upcenter_map"></div>
      </div>
      <div class="data_content_upright_container">
        <div class="data_content_alarm_container">
          <el-card class="box-card" style="height: 95%;width: 97%;">
            <div slot="header" class="clearfix">
              <span>告警</span>
              <el-button class="botton_more" type="text" @click="botton_alarm_more_clicked">更多</el-button>
            </div>
            <div v-for="o in this.alarmList.slice(0, 5)" :key="o.alarmId" class="text item">
              <div class="el-icon-alarm-clock" style="margin-top: 3px;width: 5%;"></div>
              <div style="width: 70%;display: flex;align-items: center;justify-content: left;">{{ o.alarmTitle }}</div>
              <div style="width: 20%;display: flex;align-items: center;justify-content: right;">
                {{ " 来自 " + o.alarmSender }}
              </div>
            </div>
          </el-card>
        </div>
        <div class="data_content_alarm_container">
          <el-card class="box-card" style="height: 95%;width: 97%;">
            <div slot="header" class="clearfix">
              <span>预警</span>
              <el-button class="botton_more" type="text" @click="botton_warn_more_clicked">更多</el-button>
            </div>
            <div v-for="o in this.warnList.slice(0, 5)" :key="o.warningId" class="text item">
              <div class="el-icon-warning-outline" style="margin-top: 3px;width: 5%;"></div>
              <div style="width: 70%;display: flex;align-items: center;justify-content: left;">{{ o.warningTitle }}</div>
              <div style="width: 20%;display: flex;align-items: center;justify-content: right;">
                {{ " 来自 " + o.warningSender }}
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <div class="data_content_down_container">
      <div class="data_content_downleft_container">
        <div class="data_content_downleft_content_container">
          <div v-for="(item, index) in this.autoStatusNumber" :key="index" class="data_content_downleft_card_container">
            <div class="data_content_downleft_card_tital_container">
              <i :class="getIconClass(item.status)"></i>
              <div class="data_content_downleft_card_tital">{{ item.status }}</div>
            </div>
            <div class="data_content_downleft_card_number" :style="{ color: getColor(item.status) }">{{ item.number }}
            </div>
          </div>
        </div>
      </div>
      <div class="data_content_downcenter_container">
        <div id="table2" class="data_content_downcenter_table"></div>
      </div>
      <div class="data_content_downright_container">
        <div class="data_content_downright_table_container">
          <el-card class="box-card" style="height: 97%;width: 97%;">
            <div slot="header" class="clearfix">
              <div style="display: flex;width: 20%;align-items: center;">
                <div style="width: 50%;">待办</div>
                <div v-if="this.todoNumber !== 0" class="red-dot">{{ this.todoNumber }}</div>
              </div>
              <el-button class="botton_more" type="text" @click="botton_todo_more_clicked">更多</el-button>
            </div>
            <div v-for="o in this.todoList.slice(0, 5)" :key="o.todoId" class="text item">
              <div class="el-icon-document-checked" style="margin-top: 3px;width: 5%;"></div>
              <div style="width: 60%;display: flex;align-items: center;justify-content: left;">{{ o.todoType + o.todoId }}
              </div>
              <div style="width: 40%;display: flex;align-items: center;justify-content: right;">
                {{ o.todoTime }}
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.data_container {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  justify-content: center;
  background-color: #e7ecf6;
}

.data_content_up_container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
  background-color: #e7ecf6;
}

.data_content_down_container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40%;
  background-color: #e7ecf6;
}

.data_content_upcenter_container {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data_content_upleft_container {
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.data_content_upcenter_table_container {
  width: 96%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_upright_container {
  width: 40%;
  height: 100%;
}

.data_content_alarm_container {
  height: 49.7%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_todo_container {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_downleft_container {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_downleft_content_container {
  width: 96%;
  height: 97%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 5px;
}

.data_content_downleft_card_container {
  height: 80%;
  width: 96%;
  background-color: rgb(255, 255, 255);
  margin: 0 10px;
  border-radius: 5px;
  border: 2px solid #f4f4f4;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.data_content_downleft_card_tital_container {
  display: flex;
  height: 30%;
  font-size: 70px;
  justify-content: center;
  align-items: center;
}

.data_content_downleft_card_tital {
  display: flex;
  font-size: 15px;
  width: 60%;
  height: 100%;
  justify-content: left;
  align-items: center;
}

.data_content_downleft_card_icon {
  font-size: 25px;
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  margin-right: 5px;
}

.data_content_downleft_card_number {
  display: flex;
  height: 70%;
  font-size: 40px;
  justify-content: center;
  align-items: center;
}

.data_content_downcenter_container {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_downright_container {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_downright_table_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.data_content_upleft_table {
  width: 98%;
  height: 92.5%;
  padding: 10px 0px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 5px;
}

.data_content_downright_table {
  height: 97%;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.red-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: small;
}

.data_content_upcenter_map {
  width: 100%;
  height: 92.5%;
  padding: 10px 3px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 5px;
}

.data_content_downcenter_table {
  width: 100%;
  height: 90%;
  padding: 10px 0px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 5px;
}

.botton_more {
  float: right;
  padding: 3px 0;
}

.text {
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 16px;
}

.item {
  margin-bottom: 8px;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clearfix>spon {
  height: 20px;
}
</style>
<style>
.el-card__header {
  padding: 3px 20px;
}

.el-card__body {
  padding: 10px 20px;
}
</style>

<script>
// import getMap from '@/api/getMap';//在线json
import { getAlarmList, getWarnList, getTodoUndoneList, getTodoUndoneNumber, getAutoStatusNumber, getAutoTypeNumber } from '../../api/homeData';
import MapofAnHui from '@/assets/AHS.json'
// getHomeTableData
export default {
  name: 'DataView',
  data() {
    return {
      // tableData: [],
      alarmList: [],
      warnList: [],
      todoList: [],
      todoNumber: 0,
      autoTypeNumber: [],
      expectedStatuses: ['忙碌中', '维修中', '空闲'],
      autoStatusNumber: []
    }
  },
  computed: {
    userId() {
      return localStorage.getItem("userId");
    },
  },
  methods: {
    initBar() {
      var option1 = {
        grid: {
          left: '20%'
        },
        xAxis: {
        },
        yAxis: {
          data: ['合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '六安', '亳州', '池州', '宣城']
        },
        title: {
          left: "5%",
          text: '车辆分布情况',
          subtext: '上次刷新日期2024/01/01',
        },
        series: [
          {
            color: "#409EFF",
            data: [365, 133, 150, 88, 76, 56, 78, 53, 75, 99, 43, 54, 87, 84, 61, 30],
            type: 'bar'
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = this.$echarts.init(document.getElementById('table1'));
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
    },
    initmap() {
      var option2 = {
        title: {
          text: '车辆分布可视化地图',
          subtext: 'Data from SpringBoot',
          sublink:
            'http://www.baidu.com'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (辆)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 10,
          max: 500,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '车辆分布情况',
            type: 'map',
            map: 'AH',
            label: {
              show: true
            },
            data: [
              { 'name': '合肥市', 'value': 365 },
              { 'name': '芜湖市', 'value': 133 },
              { 'name': '蚌埠市', 'value': 150 },
              { 'name': '淮南市', 'value': 88 },
              { 'name': '马鞍山市', 'value': 76 },
              { 'name': '淮北市', 'value': 56 },
              { 'name': '铜陵市', 'value': 78 },
              { 'name': '安庆市', 'value': 53 },
              { 'name': '黄山市', 'value': 75 },
              { 'name': '滁州市', 'value': 99 },
              { 'name': '阜阳市', 'value': 43 },
              { 'name': '宿州市', 'value': 54 },
              { 'name': '六安市', 'value': 87 },
              { 'name': '亳州市', 'value': 84 },
              { 'name': '池州市', 'value': 61 },
              { 'name': '宣城市', 'value': 30 }
            ],
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = this.$echarts.init(document.getElementById('map'));
      myChart2.showLoading();
      // getMap.then(res => {
      //   myChart2.hideLoading();
      //   this.$echarts.registerMap('AH', res.data)
      // })
      this.$echarts.registerMap('AH', MapofAnHui);
      myChart2.hideLoading();
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);
    },
    initPie() {
      var option3 = {
        color: ['#ef6667', '#fac858', '#91cd76', '#73c0df', '#546fc6'],
        title: {
          text: '车辆类型及其数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          transitionDuration: 0
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '车辆数量',
            type: 'pie',
            radius: '70%',
            data: this.autoTypeNumber,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart3 = this.$echarts.init(document.getElementById('table2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option3);
    },
    initTableData() {
      getAlarmList(this.userId).then(res => {
        this.alarmList = res.data.data;
      })
      getWarnList(this.userId).then(res => {
        this.warnList = res.data.data;
      })
      getTodoUndoneList(this.userId).then(res => {
        this.todoList = res.data.data;
      })
      getTodoUndoneNumber(this.userId).then(res => {
        this.todoNumber = res.data.data;
      })
      getAutoTypeNumber().then(res => {
        this.autoTypeNumber = res.data.data;
        this.initPie();
        // this.autoTypeNumber = data.map(item => {
        //   return { value: item.value, name: item.name };
        // })
      })
    },
    getIconClass(status) {
      switch (status) {
        case '忙碌中':
          return 'el-icon-position data_content_downleft_card_icon';
        case '维修中':
          return 'el-icon-setting data_content_downleft_card_icon';
        case '空闲':
          return 'el-icon-circle-check data_content_downleft_card_icon';
        default:
          return '';
      }
    },
    // 根据状态获取对应的颜色
    getColor(status) {
      switch (status) {
        case '忙碌中':
          return 'rgb(88, 219, 255)';
        case '维修中':
          return 'rgb(255, 206, 115)';
        case '空闲':
          return 'rgb(116, 255, 209)';
        default:
          return '';
      }
    },
    // 整理卡片内容
    async fetchAutoStatusNumber() {
      const res = await getAutoStatusNumber();
      const data = res.data.data;

      const processedData = this.expectedStatuses.map(expectedStatus => {
        const existingData = data.find(item => item.status === expectedStatus);
        return existingData || { status: expectedStatus, number: 0 };
      });

      this.autoStatusNumber = processedData.sort((a, b) => this.expectedStatuses.indexOf(a.status) - this.expectedStatuses.indexOf(b.status));
    },
    botton_warn_more_clicked() {
      this.$router.push("/Home/Warn");
    },
    botton_alarm_more_clicked() {
      this.$router.push("/Home/Alarm");
    },
    botton_todo_more_clicked() {
      this.$router.push("/Home/ToDoContainer")
    },
  },
  mounted() {
    this.initTableData();
    this.initBar();
    this.initmap();
    this.fetchAutoStatusNumber();
  },

  watch: {
    // 解决vue2使用echarts地图刷新丢失的问题
    alarmList: {
      deep: true, // 深度监听
      handler() {
        this.initmap();
      }
    }
  }
};
</script>
